<template>
  <div class="PersonIndexArticle tPage">
    <div v-if="SetToTopArticleInfo" style="box-sizing: border-box;">
      <ImageBlock  @click.native="gotoUrl(domain+'/MinProgram2/Article/detail_o?article_id='+SetToTopArticleInfo.article_id)" class="SetTopArticle" :img-src="domain+'/Uploads'+SetToTopArticleInfo.article_cover" width="100%" height="auto" ref="SetTopArticle"></ImageBlock>
      <div class="flex">
        <div class="flex-item" style="flex: 3;text-align: left">
          <div class="article_title midfont">{{SetToTopArticleInfo.article_title}}</div>
          <div class="articles_addtime_text minifont">发布于 {{SetToTopArticleInfo.articles_addtime_text}}</div>
        </div>
        <div class="flex-item" style="flex: 1">
          <i class="fa fa-arrow-up pull-right" v-if="!dUserinfo.is_me"> 置顶</i>
          <i class="fa fa-arrow-down pull-right" v-if="dUserinfo.is_me"  @click="CancelSetToTop"> 取消置顶</i>
        </div>
      </div>

    </div>


    <ul class="dataList flex">
      <li v-for="v in dataList" class="flex-item articleBlock">
        <item01 :p-info="v" style="width: 9.4rem" :d-userinfo="dUserinfo" @SetToTop="SetToTop"  @DeleteDo="DeleteDo"></item01>
      </li>
    </ul>
    <GetMore @getmore="get_articlelist" ref="GetMore" :getDataListDoing="getDataListDoing"></GetMore>
  </div>
</template>
<script>
import Item01 from "../../components/article/item01";
import ImageBlock from "../../components/images/ImageBlock";
import SetTop from "../../components/buttons/SetTop";
import GetMore from "../../components/buttons/GetMore";
export default {
  name:"Article",
  components: {Item01,ImageBlock,SetTop,GetMore},
  data(){
    return {
      dUserinfo:[],
      dataList:[],
      SetToTopArticleInfo:null,
      page:1,
      getDataListDoing:0
    }
  },
  created() {
    let _this=this
    _this.$nextTick(function(){
      $(window).scroll(function(){
        if (_this.$route.name!==_this.$options.name)return false
        let scrollTop = $(this).scrollTop();
        let scrollHeight = $(document).height();
        let windowHeight = $(this).height();
        if(scrollHeight - (scrollTop + windowHeight) < 100){
          console.log("you are in the bottom"+_this.$options.name);
          _this.get_articlelist()
        }
      })
    })
  },
  methods:{
    DeleteDo(article_id){
      let _this = this
      if (!confirm("确定删除文章?"+article_id))return false
      myjs.delArticle({article_id:article_id},function(){
        for (let i = 0; i < _this.dataList.length; i++) {
          if (_this.dataList[i].article_id == article_id){
            _this.dataList.splice(i,1)
          }
        }
        console.log(_this.dataList);
      },function(data){
        console.log(data);
        alert("删除失败")
      })
    },
    SetToTop(article_id){
      let _this = this
      myjs.ArticlesTopSetOne({uid:_this.dUserinfo.uid,article_id:article_id},function(){
        for (let i = 0; i < _this.dataList.length; i++) {
          if (_this.dataList[i].article_id==article_id) {
            _this.SetToTopArticleInfo = _this.dataList[i]
            //_this.dataList.splice(i,1)
            break
          }
        }
      },function(){
        alert('置顶失败')
      })
    },
    CancelSetToTop(){
      let _this = this
      myjs.ArticlesCancelSetToTop({uid:_this.dUserinfo.uid},function(){
        //_this.dataList.push(_this.SetToTopArticleInfo)
        _this.SetToTopArticleInfo = null
      },function(){
        alert('取消失败')
      })
    },
    get_articlelist(){
      let _this = this
      if (!_this.dUserinfo.uid)return false;
      if (_this.getDataListDoing)return false;
      _this.getDataListDoing=1
      myjs.get_articlelist({uid:_this.dUserinfo.uid,page:_this.page},function(data){
        _this.dataList=_this.dataList.concat(data.data)
        _this.page++
        _this.getDataListDoing=0
      },function(){
        _this.$refs.GetMore.setNoMore()
        _this.getDataListDoing=0
      })
    },
    ArticlesTopgetOneArticleByUid(){
      let _this = this
      if (!_this.dUserinfo.uid)return false;
      myjs.ArticlesTopgetOneArticleByUid({uid:_this.dUserinfo.uid},function(data){
        _this.SetToTopArticleInfo = data.data
      })
    }
  },
  mounted() {
    let _this=this
    setTimeout(function(){
      _this.dUserinfo = _this.$store.getters.getUserinfo
      if (!_this.dUserinfo){
        _this.$router.push({name:"PersonIndex"})
      }
      _this.get_articlelist()
      _this.ArticlesTopgetOneArticleByUid()
    },500)
  }
}
</script>
<style scoped>
.dataList{flex-wrap: wrap;justify-content: space-between}
.dataList>li{box-sizing: border-box;}
.setTop{
  display: block;
  border: 1px solid #8C8B8B;
  width: 1rem;height: .7rem;
  padding: 0;
  text-align: center;
  background-color: white;
}
.visit_count{color: #fff;position: absolute;left: 0;bottom: 0;font-size: .4rem;padding: .03rem .3rem .03rem .1rem;
  background: linear-gradient(to right,rgba(0,0,0,.8),rgba(0,0,0,.1));
  width: 3rem;height:.5rem; text-align: left;
}
.article_title{white-space: nowrap;text-overflow:ellipsis;overflow: hidden}
.SetTopArticle{}
.articleBlock{margin-top: .4rem}
</style>
